import React, { useState, useDeferredValue } from 'react'
import Card from './Card'
import Progress from './Progress'
export default function App() {
  const [keyWord, setKeyWord] = useState('')
  // useDeferredValue的作用: 根据一个已有的状态值, 返回一个延迟的状态值
  // deferKeyWord是当keyWord所对应的结构渲染完毕之后,deferKeyWord的值才会变化,那么他所对应的结构才会渲染
  // const deferKeyWord = useDeferredValue(keyWord)

  return (
    <div>
      请输入关键字:
      <input
        type="text"
        value={keyWord}
        onChange={(e) => {
          // react18 以前，所有的更新都是紧急的. 更新用户输入过程中，事件的触发频率非常高，会导致大量重新渲染，页面可能会出现卡顿
          setKeyWord(e.target.value.trim())
        }}
      />
      <hr />
      <Card searchQuery={keyWord}></Card>
    </div>
  )
}
